<template>
  <div id="tbooking-policy-upload">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-1">
        <li class="breadcrumb-item">携程政策-自动上传设置</li>
      </ol>
    </nav>
    <div class="card py-0">
      <div class="card-body small">
        <form class="" id="frmSearchPolicy">
          <input
            type="textfield"
            class="form-control"
            placeholder="机场代码"
            size="10"
            v-model.trim="threeCode"
          />
          <div class="col-1">
            <button
              type="button"
              class="btn btn-primary ms-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-2"
              @click.stop="reset()"
            >
              重置
            </button>
          </div>

          <span class="ms-auto btn btn-primary" @click.stop="createNew()"
            >新建</span
          >
        </form>
      </div>
    </div>

    <div class="card" v-if="isEditing">
      <div class="card-body small">
        <form role="form" class="form-horizontal">
          <div class="row">
            <label class="col-3 col-form-label text-end"> 航空公司* </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="carrier"
                placeholder="航空公司两字代码，只支持一个，必填"
              />
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> 数据类型 </label>
            <div class="col-9">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="dataType"
                />
                <label class="form-check-label">缓存</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="dataType"
                />
                <label class="form-check-label">实时</label>
              </div>
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> 产品类型* </label>
            <div class="col-9">
              <select class="form-select" v-model="productType">
                <option value="AirLineMarketing">航司直销</option>
              </select>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-end"> 始发机场* </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="dports"
                placeholder="三字代码，用逗号分隔"
              />
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> 排除航线 </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="excludeAirlines"
                placeholder="SHAPEK 表示被排除的航线，多个用逗号分隔"
              />
              <span class="text-muted small"
                >示例:SHAPEK<br />表示SHAPEK航线被排除，多个航线用逗号分隔</span
              >
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> 排除航班 </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="excludeFlights"
                placeholder="格式：20191231/ZH9606/Y"
              />
              <span class="text-muted small">
                格式：日期/航班号/舱位，多个之间用逗号分割<br />
                日期格式：20191210 或 20191210-20191215<br />
                航班号格式：ZH9606<br />
                舱位格式：*或Y或YBMC *表示所有舱位
              </span>
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> 价格规则 </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="priceRule"
                placeholder="YBMU:-10;HQVWSE:-8;LK:-3"
              />
              <span class="text-muted small"
                >1、舱位（多个舱位连续填写）:调整金额（减用负数，加用正数）
                <br />
                2、多个规则用分号分隔
              </span>
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end">
              最大航班出发日期
            </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model.trim="maxDdate"
                placeholder=""
              />
              <span class="text-muted small"></span>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-end"> 状态 </label>
            <div class="col-9">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="status"
                />
                <label class="form-check-label">停用</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="status"
                />
                <label class="form-check-label">手动</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="2"
                  v-model.number="status"
                />
                <label class="form-check-label">自动</label>
              </div>
            </div>
          </div>
          <div class="row">
            <label class="col-3 col-form-label text-end"> </label>
            <div class="col-9">
              <button
                type="button"
                class="btn btn-primary btn-lg"
                @click.stop="save()"
              >
                保存
              </button>
              <button
                type="button"
                class="btn btn-secondary btn-sm ms-5"
                @click.stop="cancel()"
              >
                取消
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <table
      class="table table-sm table-striped table-hover small"
      v-if="!isEditing"
    >
      <thead>
        <tr>
          <th>航司</th>
          <th>出发机场</th>
          <th>数据类型</th>
          <th>产品类型</th>
          <th>价格规则</th>
          <th>最大出发日期</th>
          <th>状态</th>
          <th>工作状态</th>
          <th>修改时间</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="info in dataList">
          <tr :key="info.id">
            <td>{{ info.carrier }}</td>
            <td>{{ info.dports }}</td>
            <td>{{ getDataTypeDesc(info.dataType) }}</td>
            <td>{{ info.productType }}</td>
            <td>{{ info.priceRule }}</td>
            <td>{{ info.maxDdate }}</td>
            <td>{{ getOrderStatus(info.status) }}</td>
            <td>
              <strong>上传开始时间:</strong> {{ info.beginTime }}<br />
              <strong>上传结束时间:</strong> {{ info.endTime }}
            </td>
            <td>
              {{ info.lastUpdate }}
            </td>
            <td rowspan="2" class="align-middle text-center">
              <a
                href="javascript:void(0)"
                @click.stop="edit(info.id)"
                class="btn btn-sm btn-success"
                >修改</a
              >
            </td>
          </tr>
          <tr :key="info.id + `A`">
            <td colspan="9">
              <strong>排除航线:</strong> {{ info.excludeAirlines }}<br />
              <strong>排除航班:</strong> {{ info.excludeFlights }}
            </td>
          </tr>
        </template>
        <tr v-if="dataList.length === 0">
          <td colspan="9" class="text-center text-warning">暂无数据</td>
        </tr>
      </tbody>
    </table>

    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>
  </div>
</template>

<script>
import {
  searchPolicyPriceRules,
  createPolicyPriceRule,
} from "@/api/tbooking.js";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
  },
  data() {
    return {
      dataList: [],

      threeCode: "",
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 1,
        pageTotal: 0,
      },

      id: 0,
      carrier: "",
      dataType: 0,
      productType: "AirLineMarketing",
      dports: "",
      excludeAirlines: "",
      excludeFlights: "",
      priceRule: "YBMU:-10;HQVWSE:-8;LK:-3",
      maxDdate: "2019-2-28",
      status: 0,

      isEditing: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      let y = 0;
      const x = parseInt(this.orderId);
      if (isNaN(x) === false) {
        y = x;
      }
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        departureAirport: this.threeCode,
      };

      this.showLoading();

      searchPolicyPriceRules(
        params,
        (jsonResult) => {
          this.dataList = jsonResult.dataList;
          this.sc = jsonResult.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    createNew: function () {
      this.isEditing = true;
      this.reset();
    },
    reset: function () {
      this.threeCode = "";
      this.id = 0;
      this.carrier = "";
      this.dataType = 0;
      this.productType = "AirLineMarketing";
      this.dports = "";
      this.excludeAirlines = "";
      this.excludeFlights = "";
      this.priceRule = "YBMU:-10;HQVWSE:-8;LK:-3";
      this.maxDdate = "2019-2-28";
      this.status = 0;
    },
    prepareEdit: function (info) {
      this.id = info.id;
      this.carrier = info.carrier;
      this.dataType = info.dataType;
      this.productType = info.productType;
      this.dports = info.dports;
      this.excludeAirlines = info.excludeAirlines;
      this.excludeFlights = info.excludeFlights;
      this.priceRule = info.priceRule;
      this.maxDdate = info.maxDdate;
      this.status = info.status;

      this.isEditing = true;
    },
    save: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        dataType: this.dataType,
        excludeAirlines: this.excludeAirlines,
        excludeFlights: this.excludeFlights,
        productType: this.productType,
        dports: this.dports,
        priceRule: this.priceRule,
        maxDdate: this.maxDdate,
        status: this.status,
      };

      createPolicyPriceRule(params, (v) => {
        if (v.status === "OK") {
          this.isEditing = false;
          this.showErrMsg("保存成功");
          this.search();
        } else {
          this.showErrMsg(v.errmsg);
        }
      });
    },
    edit: function (id) {
      for (let i = 0; i < this.dataList.length; i++) {
        const info = this.dataList[i];
        if (info.id === id) {
          this.prepareEdit(info);
          break;
        }
      }
    },
    cancel: function () {
      this.isEditing = false;
      this.reset();
    },
    getOrderStatus: function (status) {
      switch (status) {
        case 0:
          return "停用";
        case 1:
          return "手动";
        case 2:
          return "自动";
        default:
          return status;
      }
    },
    getDataTypeDesc: function (status) {
      switch (status) {
        case 0:
          return "缓存";
        case 1:
          return "实时";
        default:
          return status;
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>